<template>
  <div>
    <MyProduct 
    v-for="item in list"
    :key="item.id"
    :title="item.proname" 
    :money="item.proprice" 
    :id="item.id"
    @kan ="fn"
    >
  </MyProduct>
  </div>
</template>

<script>
import MyProduct from './components/MyProduct'

export default {
  components : {
    MyProduct
  },
  data() {
    return {
      list :[
        { id: 1, proname: '超级无敌椰子鸡儿', proprice: 69 },
        { id: 2, proname: '超级无敌棒棒鸡儿', proprice: 59 },
        { id: 3, proname: '超级无敌钵钵鸡儿', proprice: 49 }
      ]
    }
  },
  methods: {
    fn(id) {
      // console.log(id);
      const index =this.list.findIndex(item => item.id === id)
      this.list[index].proprice -=2
    }
  }
};
</script>

<style lang="scss" scoped>

</style>